<template>
  <div>
    <el-upload
      :action="uploadUrl"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :file-list="fileList"
      ref="upload"
      multiple
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>
<script>
import { uploadUrl, host } from "@/http/index.js";
export default {
  name: "APP",
  props: {
    fileList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      uploadUrl,
      // fileList: [],
    };
  },
  methods: {
    //上传成功-----------------------------
    handleSuccess(response, file, fileList) {
      // console.log('成功',response, file, fileList);
      // //获取上传成功后的图片的地址 <img src=''/> http://localhost:7788/+相对路径
      let url = response.url.slice(7);
      let imgUrl = host + "/" + url;
      //   console.log("url", imgUrl);
      this.$emit("sendImg", imgUrl);
    },
    handleRemove(file, fileList) {
      //   console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
    },
    //清空图片列表展示---------------
    clear() {
      // console.log("清空图片列表展示-------");
      // this.fileList = [];
      this.$refs.upload.clearFiles();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
